<div>
    <navbar sub-bar="true"/>
    <div class="container account-container">
        <br>
        <div class="row">
            <form class="col col-lg-7 offset-lg-1" @submit.prevent="createAccount" method="post">
                <h1 class="text-left">Join POP Commerce</h1>
                <p style="font-size: 0.9em;">
                    Welcome. You're just one step away from access to the number one stop for everything POP.
                </p>
                <div v-if="errorMessage != null && errorMessage != ''" class="alert alert-primary" role="alert">
                    {{errorMessage}}
                </div>
                <div class="form-group row">
                    <label for="" class=" col-form-label col-sm-3 text-left">
                        First Name *
                    </label>
                    <div class="col-sm-7">
                        <input type="text" v-model="accountInfo.firstName" class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="" class=" col-form-label col-sm-3 text-left">
                        Last Name *
                    </label>
                    <div class="col-sm-7">
                        <input type="text" v-model="accountInfo.lastName" class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="" class=" col-form-label col-sm-3 text-left">
                        Email *
                    </label>
                    <div class="col-sm-7">
                        <input type="email" v-model="accountInfo.emailAddress" class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="" class=" col-form-label col-sm-3 text-left">
                        Password *
                    </label>
                    <div class="col-sm-7">
                        <input type="password" v-model="accountInfo.newPassword" class="form-control">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="" class=" col-form-label col-sm-3 text-left">
                        Confirm Password
                    </label>
                    <div class="col-sm-7">
                        <input type="password" v-model="confirmPassword" class="form-control">
                    </div>
                </div>
                <button class="btn btn-login offset-sm-3 col-sm-7" type="submit">
                    Create Account
                </button>
            </form>
            <div class="col-lg-1 d-none d-lg-block d-xl-block">
                <div class="split-account"></div>
            </div>
            <div class="col col-lg-3">
                <p class="already-text">Already have an account?</p>
                <router-link :to="'/login'" tag="a">
                    <p class="sign-in">Sign in here</p>
                </router-link>
            </div>
        </div>
    </div>
    <br>
    <footer-page :infoLink="false"/>
</div>
